How to Use Embedded Content Intelligence

About Content Intelligence

Content Intelligence is a native SmartHub feature contained in a button  next to each search result, as shown in the example below.

Content Intelligence is also available as part of the ZeroSearch feature, described at the bottom of this page.

Feature Location and Settings

  • Source code directory
    • <Smarthub_Installation_dir>\modules\ContentIntelligence\
  • Settings:
    • Located around line 710 in the file DefaultModuleSettings.js located at: <SmartHub_install_dir>\modules\SmartHubResourceLoader\
  • Default HTML template:
    • \modules\ContentIntelligence\templates\modalTemplate.html
    • Note: Copy and rename the provided default template file or rename the existing template as "modalTemplate_backup" before modifying it.
    • The default file modalTemplate.html is overwritten when SmartHub is upgraded
  • Container ID (optional):
    • The landing page container ID is "contentIntelligence."
    • This ID can be embedded in your landing HTML page.
  • Action bar <div> tag
    • Must be embedded on the HTML page where you use Content Intelligence
    • See the below "ActionBar Component" topic for details.

How to Enable/Disable the Feature

Perform the following high-level steps to activate Content Intelligence on a SmartHub page, such as Results.html:

  1. Open the file DefaultModuleSettings.js located at: <SmartHub_install_dir>\modules\SmartHubResourceLoader\
  2. Locate the Content Intelligence settings around line 708 in the file DefaultModuleSettings.js.
  3. Copy the Content Intelligence settings (below) into your HTML page's (custom) settings file. See How to Customize Your SmartHub User Interface.

  4. (Optional) Modify the labels and values from the template file modalTemplate.html, described below as you desire.
    1. Note: You must change the name of the modalTemplate.html template file before modifying it, as it is overwritten at upgrade time.
    2. You then point your settings (see "Content Intelligence Settings" immediately below) to the new template file name.

  5. (Optional) If you want to render the Content Intelligence feature on landing page on load, embed the ZeroSearchParentContainerID ("contentIntelligence") found in the Content Intelligence settings (see below), in the desired (custom) landing HTML page file.

  6. Set the ResultsEnabled property to "true."
    1. Set any other properties as you desire. Refer to the settings descriptions below.

  7. Lastly, insert the ActionBar component. The ActionBar component is a <div> tag that must be embedded where you use Content Intelligence.
    1. The ActionBar component is shown below on line 145 (<div class="CoveoActionBar core-action-bar">), within the ResultList component "CoveoResultList".



  8. Save and close all files.

  9. Test the feature by performing a query on your SmartHub site.

Content Intelligence Settings

SmartHub Version Impact

The settings below may vary slightly between SmartHub versions.

The settings shown below are from SmartHub version 5.1.

Content Intelligence settings, shown below, must be copied into the custom settings file for the HTML page that will host the Content Intelligence feature.

For example, the settings would be inserted into the settings file "CustomResultsSettings.js" for the "CustomResults.html" page.

CI Settings to Copy from File DefaultModuleSettings.js

Content Intelligence high-level feature settings are stored, like other BA Insight SmartHub features, in the file DefaultModuleSettings.js

  • DefaultModuleSettings.js is stored in: <SmartHub_install_dir>\modules\SmartHubResourceLoader\

Content Intelligence settings are listed around line 708 in the file, depending on your specific configuration. See the graphic immediately below.

  • Title: The name of the component. This setting is used when the EnableLandingZeroSearch setting is enabled, otherwise the results title is used.
  • ContentModalTemplatePath: The path to the HTML page that controls the features layout and function, such as the layout of the form and the metadata captured.
  • SearchInterfaceElement: The ID of the search interface element that is embedded into the HTML page that uses Content Intelligence.
  • ZeroSearchParentContainerID: The container ID that must be embedded into the landing HTML page that renders the Content Intelligence on load.
  • EnableLandingZeroSearch: Enable or disable the rendering of the Content Intelligence modal when loading the landing page. By default, this is disabled.
  • LandingEnabled: The Index or Landing page setting - set to "Enabled" to activate the feature on your query Index/Landing HTML page.
  • ResultsEnabled: The Results page setting - set to "Enabled" to activate the feature on your query Results HTML page.
  • ButtonTitle: The name shown on the CI button in the user interface, next to each search result. In the graphic at the top of this page, this is shown as "Insights".

ActionBar Component

The ActionBar component is a <div> tag that must be embedded where you intend to use Content Intelligence.

The location of the <div> tag does not matter.

ResultList Component

If the results are displayed via the ResultList component, make sure that the item template contains the ActionBar component.

This component is required.

ActionBar markup is shown here:

Copy
<div class="CoveoActionBar core-action-bar"></div>

TabularView Component

If the results are displayed via the TabularView component, enable Content Intelligence in the SH.TabularView.CustomSettings section from the page's Custom Settings file.

TabularView settings snippet:

Copy
SH.TabularView.CustomSettings = {
     "TabularResultList":{
         "EnableContentIntelligence": "true"     }
};

Example: Index.html

In the following example, "Recommendations and personalized boxes" on the Index.html page are controlled by the code shown below.

  • While the example below uses the Index page, Content Intelligence is most commonly inserted into the Results page.
  • The instructions for inserting Content Intelligence into any page are similar to those below.
  • The details for each category are shown for the default Index.html page.
  • For example, the Content-by-search component is defined around line 125.

To employ Content Intelligence on this Index HTML page, perform the following general steps:

Note: Do not modify the default Index.html file, use a customized Index HTML file. See How to Customize Your SmartHub User Interface for more information.

  1. Open (or create) your custom Index HTML page. For example <SmartHub_root>\IndexCustom.html.

  2. Insert the <CoveoResultList> component (line 133 in the example below) under  <div class='landing_categories'> (line 123 below). This requires the ActionBar markup (line 145 below), described above.



  3. Open the file DefaultModuleSettings.js, described above.
    1. Copy the Content Intelligence settings around line 710.

  4. Open your custom Index page's custom settings file. Locate the SH.ContentIntelligence.CustomSettings line.

  5. Insert the copied Content Intelligence settings (starting with "Title") into your Index custom settings file. See the screenshot below as an example.

  6. Ensure the code is valid and well-formed, with all tags properly open and closed.

  7. Save and close all files.

modalTemplate: Default Labels and Values

Note: Copy and rename the provided default modalTemplate.html template file before modifying it.
It is overwritten when SmartHub is upgraded. 

The provided modalTemplate.html template includes the following pieces, all of which effect what is shown in the UI:

  • Classes
  • Form groups
  • Labels
  • Values
  • Titles

Each Label corresponds to a property.

Labels and their corresponding properties, stored in the search index, are shown in the graphic below :

All properties (highlighted in the graphic below) MUST be set in your custom modalTemplate HTML file or the fields in the UI will not be populated with values.

Changing the modalTemplate Name or Path

Changing the modalTemplate.html filename requires the new file to be declared and defined in any custom page settings files.

For more about custom files, see How to Customize Your SmartHub User Interface.

Example

For example, in the custom Results page settings file example below, CI custom settings (SH.ContentIngelligence.CustomSettings) are stored in a modal template file named CI.html in a custom directory (/SmartSearchNew/templates/CI.html).

This custom file is not overwritten when SmartHub is upgraded.

ResultCustomSettings.js Example

How to Configure Content Intelligence Labels and Metadata

The provided modalTemplate is an HTML page that can be modified as you see fit.

Form groups, classes, labels, values, etc. can be reused and/or renamed.

Populating Content Intelligence with Metadata

Populating your Content Intelligence fields with properties (metadata) requires two things:

  • Properties declared in a custom modalTemplate HTML file, shown and described above.
    • DO NOT modify the modalTemplate.html file provided out of the box; the file is overwritten at upgrade time.
  • Properties listed in your Results or custom Results HTML page.
    • The parameter "data-fields-to-include" (shown below) contains the list of data fields shown in the UI.
      • Some values are provided by default (around line 126).
      • See the example and graphic below.

Example

Below is an example which contains:

  • Class "CoveoResultList" which contains "data-fields-to-include,"
    • "data-fields-to-include": includes the properties made available in CI.
      • Properties are entered as a comma-separated list, each preceded by an '@' character.
      • Any fields in your modalTemplate.html file that are NOT included in the "data-fields-to-include" comma-separated list, are not populated with values in CI, even if the properties exist in your index. 

Example: Content Intelligence Template

The CI example below contains:

  • Sections with values: A "metaContainer" class, shown below with label "Summary."
    • Can also contain titles (div class "metaTitle") and values (div class "metaValue") under the section.
  • Form Groups: Such as the box that includes the metadata labels:
    • Author
    • Last Modified
    • Content Source
    • Result Type
  • Labels: Such as "Author," "Extracted Text in Images," "Content Source," and so on. 
  • Values: Attached to Labels below, such as "SharePoint Content," "pdf," "2020-04-23T13:5901.000Z," and so on.

Content Intelligence Example With HTML Source Code

Below is another modalTemplate HTML file with various CI classes, Sections, Form groups, Labels, and Values, and the corresponding user interface provided to the user.

Note: In the screenshot below, the fields are shown for example purposes.
They are not populated.

How to Select Properties to Display in UI


ZeroSearch Feature

What is ZeroSearch?

ZeroSearch renders an HTML element that combines Advanced Search functions with Content Intelligence functions.

The ZeroSearch feature can be used on a custom Index or Landing page.

  • In the screenshot of a ZeroSearch frame below observe the following:
    • Advanced Search functions appear on the left
    • When query text and options are selected, and the Search button clicked:
      • On the right side, under Search preview, the top search returns are displayed.
      • A Content Intelligence "Insights" icon is displayed for each returned result.
      • Selecting the "Insights" link under each returned item displays the Content Intelligence properties described above.

Example

The example below supposes a SmartHub site that uses the following custom Index files for the sake of example:

  • HTML Index Page:
    • IndexCustom.html
  • Index Page Settings File:
    • IndexCustomSettings.js

How to Enable ZeroSearch

To enable the ZeroSearch feature on a landing/index HTML page, perform the following general steps:

Do not modify the default Index.html file, use a customized Index HTML file. See How to Customize Your SmartHub User Interface for more information.

  1. Open (or create) your custom Index HTML page.
    For example: <SmartHub_root>\IndexCustom.html.

  2. Choose a location where you want the Content Intelligence ZeroSearch element to be rendered and add the following code:
    Note: Where you place the code affects where on the page the ZeroSearch box appears. In the example below, the ZeroSearch box appears on the bottom of the Index page.

    <div id="contentIntelligence" class="contentIntelligence"></div>



  3. Open the file <SmartHub_root>\modules\SmartHubResourceLoader\DefaultModuleSettings.js and copy the Content Intelligence settings (from around line 710).

  4. Open your page's custom settings file, such as a custom Index page's custom settings file (ex. IndexCustomSettings.js for the page IndexCustom.html).
    Locate the SH.ContentIntelligence.CustomSettings line.

  5. Insert the copied Content Intelligence settings (starting with "Title") into your Index custom settings file.
    See the screenshot below as an example.



  6. Change the following settings:
    1. ZeroSearchParentContainerID: If you choose another ID for your <div> element at step 2, change this setting to contain that ID.
    2. EnableLandingZeroSearch: Set to true.
    3. LandingEnabled: Make sure this setting is set to true.
    4. Title: Optional. Add a new title for your element.

  7. Ensure the code is valid, well-formed, and all tags are properly opened and closed.

  8. Save and close all files.